<template>
  <view class="qui-back">
    <view class="qui-back__body">
      <view class="qui-back__body__content">
        <view class="qui-back__body__content-title" @tap="back">

          <qui-icon :name="iconLeft" size="34" class="icon-left" :color="theme === $u.light() ? '#333' : '#fff'">
          </qui-icon>
          <text>{{ title || i18n.t('discuzq.pageHeader.title') }}</text>
        </view>
      </view>
      <view class="qui-back_body__right" v-if="slotRight">
        <slot></slot>
      </view>
      <view class="qui-back__body__right" v-if="!slotRight">
        <view class="qui-back__body__right-pop">
          <view class="qui-back__body__right-pop-item" @tap="gotoPage('/mainpage/bbs/categories')">
            <qui-icon name="icon-home" size="34" :color="theme === $u.light() ? '#777' : '#fff'"></qui-icon>
          </view>
          <view :class="['qui-back__body__right-pop-item', redCircle ? 'message' : '']"
            @tap="backPage('/pages/home/index', '2')" v-if="isLogin">
            <qui-icon name="icon-message" size="32" :color="theme === $u.light() ? '#777' : '#fff'"></qui-icon>
          </view>

        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import user from '@/mixin/user';
  import {
    mapState,
    mapMutations
  } from 'vuex';

  export default {
    name: 'QuiBack',
    mixins: [user],
    props: {
      title: {
        type: String,
        default: '',
      },
      iconLeft: {
        type: String,
        default: 'icon-back',
      },
      slotRight: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        isLogin: this.$store.getters['session/get']('isLogin'),
        // route:'',
      };
    },
    created() {

    },
    computed: {
      redCircle() {
        return this.user.unreadNotifications;
      },
      ...mapState({
        footerIndex: state => state.footerTab.footerIndex,
      }),
    },
    // 暂时留着 后期修改路由时可能会用
    // created() {
    //   let pagesRouter = getCurrentPages();
    //   let beforeRouter = pagesRouter[pagesRouter.length - 2];
    //   this.route = beforeRouter.route;
    //   console.log(beforeRouter.route, 'beforeRouterbeforeRouterbeforeRouter');
    // },
    methods: {
      backPage(pageUrl, index) {
        // if (index) {
        //   this.setFooterIndex(parseInt(index, 10));
        // }
        if (index === '0') {
          uni.$emit('updateIndex');
        }
        if (index === '2') {
          uni.$emit('updateNoticePage');
        }
        if (index === '3') {
          uni.$emit('updateMy');
        }
        uni.redirectTo({
          url: pageUrl + '?cur_index=' + index,
        });
      },
      back() {
        const pages = getCurrentPages();
        if (pages.length > 1) {
          uni.navigateBack({
            delta: 1
          });
        } else {
          uni.redirectTo({
            url: '/pages/home/index',
          });
        }
      },
      ...mapMutations({
        setFooterIndex: 'footerTab/SET_FOOTERINDEX',
      }),
    },
  };
</script>

<style lang="scss" scoped>
  @import '@/styles/base/variable/global.scss';
  @import '@/styles/base/theme/fn.scss';

  .qui-back {
    position: fixed;

    top: 0;
    z-index: 200;
    width: 100%;
    padding: 9px 20px;
    padding-left: 16px;
    /* #ifdef APP-PLUS */
    padding-top: 40rpx;
    /* #endif */

    background: --color(--qui-BG-2);
    border-bottom: 1px solid --color(--qui-BOR-ED);
    box-sizing: border-box;

    &__body {
      /* #ifdef MP-WEIXIN*/
      padding-top: 50rpx;
      width: 450rpx;
      /* #endif */
      position: relative;
      display: flex;
      height: 25px;
      align-items: center;
      justify-content: space-between;
    }

    &__body__content {
      flex: 1 1 0%;
    }

    &__body__content-title {
      font-size: $fg-f4;
      color: --color(--qui-FC-333);
      transition: $switch-theme-time;
    }

    &__body__right-pop-item {
      display: inline-block;
      margin-left: 24px;
      color: --color(--qui-FC-333);
    }
  }

  .icon-left {
    margin-right: 5px;
  }

  .cell-item__body__right {
    align-items: center;
    justify-content: flex-end;
    font-size: $fg-f4;
    text-align: right;
  }

  .message {
    position: relative;
  }

  .message:after {
    position: absolute;
    top: -2px;
    right: -3px;
    width: 5px;
    height: 5px;
    background: #ff0000;
    border-radius: 50%;
    content: '';
  }
</style>
